<template>
 <div>
     <h3>Top Heroes</h3>
     <div class="grid grid-pad">
         <div v-for="hero in topHeroes" class="col-1-4">
        <div class="module hero" @click="goToDetail(hero.id)">
            <h4>{{hero.name}}</h4>
        </div>
     </div>
     </div>
 </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "HeroDashboard",
  data() {
    return {
      topHeroes: this.$store.getters.topHeroes
    };
  },
  methods: {
    gg: function() {
      console.log(this.$store.getters.topHeroes);
    },
    goToDetail: function(heroId) {
      this.$router.push({ path: `/angular/detail/${heroId}` });
    }
  }
};
</script>
<style scoped>
[class*="col-"] {
  float: left;
  padding-right: 20px;
  padding-bottom: 20px;
}
[class*="col-"]:last-of-type {
  padding-right: 0;
}
a {
  text-decoration: none;
}
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h3 {
  text-align: center;
  margin-bottom: 0;
}
h4 {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid {
  margin: 0;
}
.col-1-4 {
  width: 25%;
}
.module {
  padding: 10px;
  text-align: center;
  color: #eee;
  max-height: 120px;
  min-width: 120px;
  background-color: #607d8b;
  border-radius: 2px;
}
.module:hover {
  background-color: #eee;
  cursor: pointer;
  color: #607d8b;
}
.grid-pad {
  padding: 10px 0;
}
.grid-pad > [class*="col-"]:last-of-type {
  padding-right: 20px;
}
@media (max-width: 600px) {
  .module {
    font-size: 10px;
    max-height: 75px;
  }
}
@media (max-width: 1024px) {
  .grid {
    margin: 0;
  }
  .module {
    min-width: 60px;
  }
}
</style>


